<template>
  <t-row style="width: 100%" justify="end">
    <ColumnSetButton :columns-list="TABLE_COLUMNS" name="codesigner-column" @changeColumns="handleChangeColumns"  />
  </t-row>
  <t-table :data="data" :columns="columns"></t-table>
</template>
<script setup lang="ts">
import {ref} from "vue"
import ColumnSetButton from "./components/column-set-button.vue";
import { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';

const TABLE_COLUMNS=[
  {
    colKey: 'serial-number',
    title:"序号",
    width:300
  },
  {
    colKey: "name",
    title: "姓名",
    width:400
  },
  {
    colKey: "age",
    title: "年龄",
    width:400
  },
  {
    colKey: "gender",
    title: "性别",
    width:400
  },
  {
    colKey: "address",
    title: "地址",
    width:400
  },
  {
    colKey: "phone",
    title: "电话",
    width:300
  },
]
const columns = ref<PrimaryTableCol<TableRowData>[]>([...TABLE_COLUMNS])

const data = [
  {
    name: "张三",
    age: 18,
    address: "北京",
    gender: "男",
    phone: "123456789",
  },
  {
    name: "李四",
    age: 20,
    address: "上海",
    gender: "女",
    phone: "1234567890",
  },
  {
    name: "王五",
    age: 22,
    address: "广州",
    gender: "女",
    phone: "1234567891",
  },
  {
    name: "赵六",
    age: 24,
    address: "深圳",
    gender: "男",
    phone: "1234567892",
  },
  {
    name: "孙七",
    age: 26,
    address: "杭州",
    gender: "男",
    phone: "1234567894",
  },
];

// 改变列
const handleChangeColumns=(list:any)=>{
  columns.value=list
}
</script>
